import weatherPic from "@/assets/weather.webp";
import { Cascader, Empty, Spin } from "antd";
import { useEffect, useState } from "react";
import { getCityData, getWeather } from "../utils/utils";
import "./cityList.less";
type Props = {
  currentCountry?: string;
  setLngLat: (arg: { lng: number; lat: number }) => void;
  setCityName: (arg: string) => void;
  holidayDate: any;
};

export default function CityList(props: Props) {
  const { currentCountry, setLngLat, setCityName, holidayDate } = props;
  const [cityData, setCutyData] = useState();
  const [weatherInfo, setWeatherInfo] = useState<any>();
  const [params, setParams] = useState<any>();
  const [loading, setLoading] = useState<boolean>();
  useEffect(() => {
    getCityData().then((res: any) => {
      setCutyData(res);
    });
  }, []);
  const getInfo = (_params) => {
    const { cityCode = undefined, cityName = undefined } = _params || {};
    if (!cityCode || !cityName) {
      return;
    }
    setLoading(true);
    getWeather(cityCode)
      .then((res) => {
        const { lat = 39.914889, lon: lng = 116.404449 } = res?.location;
        setLngLat({
          lat,
          lng,
        });
        setCityName(cityName);
        setWeatherInfo(res?.now || {
        });
        setTimeout(() => {
          setLoading(false);
        }, 500);
      })
      .catch((err) => { });
  }
  const onChange = (value: any, selectedOptions: any) => {
    const cityCode = value[value?.length - 1 || 0];
    const cityName = selectedOptions[value?.length - 1 || 0]?.label;
    setParams({
      cityCode,
      cityName
    })
  };
  useEffect(() => {
    if (!holidayDate) {
      setWeatherInfo(null);
      return;
    };
    getInfo(params);
  }, [holidayDate, params])
  return (
    <div className="cityList_container">
      <div className="cityList_container_tilte_text">天气情况</div>
      <Cascader
        options={currentCountry === "中国" ? cityData : []}
        defaultValue={(currentCountry as any) || ""}
        onChange={onChange}
        placeholder="请选择地区"
        style={{ width: "100%", margin: "8px 0" }}
      />
      {weatherInfo ? (
        <div className="cityList_info">
          <div className="cityList_info_weather">
            <div className="cityList_info_weather_pic">
              <img src={weatherPic} alt="" />
            </div>
            <div className="cityList_info_weather_text">
              <div className="cityList_info_weather_txt">
                <span>temperature：</span>
                <span>{weatherInfo?.tempMin}~{weatherInfo?.tempMax}</span>
              </div>
              <div className="cityList_info_weather_txt">
                <span>weather：</span>
                <span>{weatherInfo?.textDay}</span>
              </div>
              <div className="cityList_info_weather_txt">
                <span>wind direction：</span>
                <span>{weatherInfo?.windDirDay}</span>
              </div>
              <div className="cityList_info_weather_txt">
                <span>Date：</span>
                <span>{holidayDate}</span>
              </div>
            </div>
          </div>
        </div>
      ) : <div style={{ position: 'absolute', top: '50%', left: 'calc(50% - 113px)' }}><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description='暂无数据，请先选择节假日和地区' /></div>}
      {
        loading && <div className="example">
          <Spin />
        </div>
      }
    </div>
  );
}
